<template>
  <a-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" :cancelText="$t('关闭')" @cancel="handleCancel">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{$t('关闭')}}</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div style="margin-bottom: 10px">
        <span style="color: orange; margin-bottom: 10px">
          {{ $t('说明：可复制相应的链接在电脑浏览器中查看，或使用微信扫一扫扫描二维码在手机端查看。') }}
        </span>
      </div>
      <a-row :gutter="10" style="max-height: 640px;overflow-y: auto;">
        <a-col :span="12" v-for="(dtl,i) in dataSource" :key="i" style="display:flex;margin-bottom:10px">
          <div style="white-spcae:nowrap">{{i+1}}、</div>
          <div>
            <div><span>{{$t('标题：')+dtl.title}}</span></div>
            <div style="margin-top:10px">
              <span style="padding-right: 10px">{{$t('链接：')+dtl.linkAddress}}</span>
              <a-button type="primary" size="small" @click="copy(dtl.linkAddress)">{{$t('复制')}}</a-button>
            </div>
            <div style="margin-top:10px">
              <span style="padding-right:10px">{{$t('二维码：')}}</span>
              <img :src="dtl.qrCode" style="vertical-align: text-top;width:160px;height:160px" />
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'

export default {
  name: 'HelpModal',
  data() {
    return {
      title: this.$t('帮助'),
      width: 900,
      visible: false,
      confirmLoading: false,
      dataSource:[]
    }
  },
  methods: {
    show(url) {
      this.dataSource=[]
      this.visible = true
      getAction('/system/menu/helpList',{url:url}).then(res=>{
        if(res.success){
          this.dataSource = res.result
        }else{
          this.dataSource=[]
        }
      })
    },
    copy(value) {
      let cInput = document.createElement('input')
      cInput.value = value
      document.body.appendChild(cInput)
      cInput.select()
      document.execCommand('copy')
      if (document.execCommand('copy')) {
        this.$message.success(this.$t('复制成功'))
      }
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style scoped>
</style>

